﻿@{
    ViewBag.Title = "加入医途";

}
@model Yitu.Web.ViewModels.UserRegisterViewModel

<div class="wrap">
    <div class="join-us">
        <p class="ty-logon"></p>
        @using (Html.BeginForm("register", "user", FormMethod.Post, new { id = "myform", @class = "form" }))
        {
            <div class="form-data">
                <label>姓名</label>
                @Html.TextBoxFor(o => o.Name, new { @class = "form-control required", placeholder = "请输入姓名..." })
            </div>
            <div class="form-data">
                <label>手机</label>
                @Html.TextBoxFor(o => o.Mobile, new { @class = "form-control required isMobile", placeholder = "请输入手机..." })
            </div>
            <div class="form-data flex-horizontal-layout">
                <p class="items">
                    <input type="text" name="VerifyCode" placeholder="请输入验证码..." />
                </p>
                <span></span>
                <p class="items"><button id="getCode" type="button" class="submit-btn" style="height:33px;">获取验证码</button></p>
            </div>
            <div class="form-data flex-horizontal-center">
                <p class="items"><input type="radio" name="RoleID" rid="1" value="@Convert.ToInt32(Enum.Parse(typeof(Yitu.Web.Helpers.Role), "助手"))" />我是医生</p>&nbsp;&nbsp;
                <p class="items"><input type="radio" name="RoleID" rid="2" value="@Convert.ToInt32(Enum.Parse(typeof(Yitu.Web.Helpers.Role), "患者"))" checked />我是患者</p>&nbsp;&nbsp;
            </div>
            <div class="form-data">
                <label>省份</label>
                @Html.DropDownList("province", ViewBag.province as SelectList, new { @class = "required" })
            </div>
            <div class="form-data">
                <label>城市</label>
                @Html.DropDownList("city", ViewBag.city as SelectList, new { @class = "required" })
            </div>
            <div class="form-data">
                <label>医院</label>
                @Html.DropDownList("hospital", ViewBag.hospital as SelectList, new { @class = "required" })
            </div>
            <div class="form-data doc">
                <label>科室</label>
                <select name="Deparment">
                    <option value="1">外科</option>
                </select>
            </div>
            <div class="form-data doc">
                <label>职称</label>
                <select name="DoctorOffice">
                    <option value="1">主治医师</option>
                </select>
            </div>
            <div class="form-data flex-horizontal-layout">
                <p class="items"><button type="button" id="yz-img" class="submit-btn" style="height:33px;">上传医生资格证照片</button></p>
                <span></span>

                <p class="items"><button type="button" id="ex-img" class="submit-btn" style="height:33px;background-color:#B5B5B6;">点击查看示例照片</button></p>
                <input type="hidden" name="DoctorCertificate" id="DoctorCertificate" />
            </div>
            <div class="form-data" id="bind-mobile">
                <input type="checkbox" />
                <span id="first">同时绑定此手机号</span><br />
                <span id="last">后续可通过此微信号直接登录；您可以使用<a>手机号及密码登录医途网</a>。</span>
            </div>

            <div class="form">
                <div class="form-data">
                    <button type="submit" class="submit-btn">注&nbsp;&nbsp;册</button>
                </div>
            </div>
        }


    </div>
</div>



@section scripts
{

    <script src="~/Content/js/jquery.validate/jquery.validate.min.js"></script>
    <script src="~/Content/js/plupload/js/plupload.full.min.js"></script>


    <script>
        $(function () {

            // 手机号码验证
            jQuery.validator.addMethod("isMobile", function (value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            ///医生资质证书上传
            var uploader = new plupload.Uploader({
                browse_button: 'yz-img', //触发文件选择对话框的按钮，为那个元素id
                url: '/api/UploadApprove/',
                multi_selection: false,
                max_file_size: '1mb',
                filters: [
			    { title: "Image files", extensions: "jpg,png" }
                ],
            });

            //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded', function (uploader, files) {
                uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
            });
            uploader.bind('UploadProgress', function (uploader, file) {
                //console.log(uploader);
                $("#yz-img").html("文件上传中，请稍等..." + file.percent + "%");
                if (file.percent == 100) {
                    $("#yz-img").html("上传完成！点击可重新上传");

                }

            });

            uploader.bind('UploadComplete', function (uploader, files) {
                //console.log(files);
            });

            uploader.bind('FileUploaded', function (up, file, result) {
                //console.log(result.response);
                $("#DoctorCertificate").val(result.response);
                ///上传成功后注册查看事件
                $("#ex-img").on("click", function () {
                    layer.open({
                        title: '医生资格证',
                        content: "<img width='100%' src=" + result.response + ">"
                    })
                });
            });

            uploader.init();

            $(".doc").hide();
            ///角色切换，显示/隐藏对应的元素
            $("input[type='radio']").on("click", function () {
                if ($(this).attr("rid") == 2) {
                    $(".doc").hide();
                } else {
                    $(".doc").show();
                }
            });

            ///获取短信验证码
            $("#getCode").on("click", function () {
                var mobile = $("#Mobile").val();
                $.post("/api/getVerifyCode", { "mobile": mobile }, function (data) {
                    // layer.open(data.msg);
                    layer.open({
                        content: data.msg
                    })
                });


            });

        });



    </script>
}
